<template>
	<aside>
		<Card class="card" v-if='mineMes=="index"'>
			<p slot="title">个人专区</p>
			<Row>
				<Col span="8">
				<img src="../images/a3.jpg" />
				</Col>
				<Col span="16">
				<div class="message">
					<h3>卓传伟 </h3>
					<p>测试ing</p>
					<p>如何还有梦想，就别再去想...</p>
					<a href="https://gitee.com/zhuochuanwei/events">个人项目</a>
				</div>

				</Col>

			</Row>
		</Card>
		<Card class="card">
			<p slot="title" class="bg_black">浏览排行</p>
			<ul>
				<li class="point" v-for="(value,index) in titleDataContent" :key='index'   @click="turnTo(value.aid,'article')">
					{{value.title}}
					<Badge :count="value.hits" class='badge' ></Badge>
				</li>
			</ul>
		</Card>
		<Card class="card">
			<p slot="title">标签云</p>
			<div class="btn_group">

				<Button  class="btn point" v-for="(value,index) in tagContent" :key='index'  @click.native="turnTo(value.tid)">{{value.tname}}</Button>
	
				
			</div>
		</Card>
	</aside>
</template>

<script>
	import Server from '../server/server.js'
	  export default {
    	data () {
    			return {
    				mineMes:'index',
    				tagContent:[],
    				titleDataContent:[],
    			}
    	},	
        methods: {
            handleStart () {
                this.$Modal.info({
                    title: 'Bravo',
                    content: 'Now, enjoy the convenience of iView.'
                });
            },
            getDatas () {
				Server.tagsContent.then((data)=>{  
					if(!data.status) { 
						this.info(true, data.mes||'数据获取失败!');
						return;
					}
					this.tagContent=data.list;
				})
				Server.titleDatasContent.then((data)=>{  
					if(!data.status) { 
						this.info(true, data.mes||'数据获取失败!');
						return;
					}
					this.titleDataContent=data.list;

				})

            },
            turnTo(id,where) {
            	if(where=='article'){
            		 this.$router.push({path: '/article', query: {aid: id}});
            	}else{
            		this.$router.push({path: '/search', query: {tid: id}});
            	}
				 this.$parent.$parent.$parent.reload()           	

            },
            init (){
            	if(this.$route.path=='/search'||this.$route.path=='/article'){
        			this.mineMes='none';
        		}
            	this.getDatas();
        		
        		
            	
            },
        },
        
        mounted () {
        	this.init();
        	
        }
        
    }
</script>

<style scoped="scoped" lang="less">
	.card {
		width: 100%;
		min-width: 340px;
		margin-bottom: 50px;
		position: relative;
		img {
			width: 100%;
		}
		.message {
			margin-left: 10%;
			line-height: 30px;
		}
		.bg_black {}
		ul {
			list-style: none;
			li {
				position: relative;
				padding: 8px 0;
				border-bottom: 1px solid gainsboro;
			}
		}
		.btn {
			margin: 0 10px 10px 0;
		}
		
	}
	
	.badge {
		display: block;
		position: absolute;
		right: 5%;
		top: 8px;
	}
	.point{
		cursor: pointer;
	}


</style>